<script setup lang="ts">
    import { reactive, watch, onMounted, ref } from 'vue'//引入vue函数
    import { getCategoryList, addCategory, updateCategory } from '@/api' //数据接口
    import type { Category } from '@/model' //导入自定义数据类型
    import type { FormInstance } from 'element-plus' //导入表单实例类型
    import { ElMessage } from 'element-plus' //导入消息框

    //获得当前组件属性
    const props = defineProps(["isShow", "category"])

    //自定义事件
    const emit = defineEmits(["closeDialog"])

    //所有一级分类
    const menuList = ref<Category[]>([])

    //定义表单数据对象
    const formObj = reactive({
        name:"",
        level:1,
        pid:-1
    });

    //定义表单对象实例的引用
    const formRef = ref<FormInstance>()

    //定义表单验证规则
    const rules = reactive({
        name:[
            { required:true, message:"分类名称不能为空", trigger:"blur"}
        ],
        pid:[
            {
                validator:(_rule:any, value:any, callback:any)=>{
                    if(value=="" && formObj.level==2){
                        callback(new Error("请选择上级分类名称"))
                    }
                    else{
                        callback()
                    }
                }
            }
        ]
    })

    //表单提交，添加或修改分类
    async function submitForm(){
        await formRef.value?.validate(async (valid, _fields)=>{
            if(valid){
                var res = null
                if(props.category.id == 0){
                    //添加分类
                    formObj.pid = formObj.pid==-1?0:formObj.pid
                    res = await addCategory(formObj)
                }
                else{
                    //修改分类
                    const data = {
                        id:props.category.id,
                        name:formObj.name,
                        pid:formObj.pid==-1?0:formObj.pid
                    }
                    res = await updateCategory(data)
                }
                if(res.data.errno == 0){
                    //发送自定义事件
                    emit("closeDialog")
                    //添加或修改成功
                    ElMessage.success(res.data.errmsg)
                }
                else{
                    //添加或修改失败
                    ElMessage.error(res.data.errmsg)
                }
            }
        })
    }

    //重置表单
    function resetForm(){
        // formObj.name = ""
        // formObj.level = 1
        // formObj.pid = -1
        initForm()
    }

    //初始化表单数据
    function initForm(){
        formObj.name = props.category.name
        formObj.level = props.category.pid==0||props.category.pid==-1?1:2
        formObj.pid = props.category.pid==0||props.category.pid==-1?-1:props.category.pid
    }

    //查询所有一级分类
    async function loadCategoryList(){
        const res = await getCategoryList()
        menuList.value = res.data.data.filter((item:Category)=>item.pid==0)
    }

    //监听当前组件属性是否发生变化
    watch(props,()=>{
        loadCategoryList()
        resetForm()
        initForm()
    })

    //组件加载完成
    onMounted(()=>{
        loadCategoryList()
        initForm()
    })
</script>

<template>
    <el-form ref="formRef" :model="formObj" :rules="rules" label-width="120" status-icon>
        <el-form-item label="分类名称" prop="name">
            <el-input v-model="formObj.name" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="二级分类">
            <el-radio-group v-model="formObj.level" :disabled="props.category.id==0?false:true">
                <el-radio :value="2">是</el-radio>
                <el-radio :value="1">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="分类级别" v-show="formObj.level==2" prop="pid">
            <el-select v-model="formObj.pid" style="width:200px;">
                <el-option label="请选择上级分类名称" :value="-1"></el-option>
                <el-option v-for="item in menuList" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="">
            <el-button type="primary" @click="submitForm">{{ props.category.id==0?"新增":"修改" }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped></style>